<template>
  <div class="loader">
    <span class="ball" style="--i: 1"></span>
    <span class="shadow" style="--i: 1"></span>
    <span class="ball" style="--i: 2"></span>
    <span class="shadow" style="--i: 2"></span>
    <span class="ball" style="--i: 3"></span>
    <span class="shadow" style="--i: 3"></span>
    <span class="ball" style="--i: 4"></span>
    <span class="shadow" style="--i: 4"></span>
    <span class="ball" style="--i: 5"></span>
    <span class="shadow" style="--i: 5"></span>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
.loader {
  width: 650px;
  height: 80px;
  position: relative;
}

.loader span.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightseagreen;
  position: absolute;
  left: calc(var(--i) * 100px);
  animation: jump 2s linear infinite calc(var(--i) * 0.3s);
}

.loader span.shadow {
  width: 50px;
  height: 25px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  left: calc(var(--i) * 100px);
  bottom: -12.5px;
  z-index: -1;
  animation: shadow 2s linear infinite calc(var(--i) * 0.3s);
}

@keyframes jump {
  0%,
  100% {
    bottom: 150px;
  }
  40%,
  60% {
    bottom: 0;
    height: 50px;
  }
  50% {
    height: 25px;
    /* 颜色滤镜 设置不同度数改变颜色 */
    filter: hue-rotate(180deg);
  }
}

@keyframes shadow {
  0%,
  100% {
    transform: scale(2);
    opacity: 0.1;
    filter: blur(5px);
  }
  40%,
  60% {
    transform: scale(1);
    opacity: 1;
    filter: blur(2px);
  }
}
</style>
